import React, { useState } from "react";
import PropTypes from "prop-types";
import "./Srepper.less"; // 确保文件名正确

const Stepper = ({
  initialValue = 0,
  min = 0,
  max = 6000,
  step = 1,
  onChange = () => {},
  inputWidth = "60px",
  inputHeight = "30px",
  inputLeft = "35px",
}) => {
  const [value, setValue] = useState(initialValue);

  const handleIncrement = () => {
    setValue((prevValue) => {
      const newValue = Math.min(prevValue + step, max);
      if (onChange) onChange(newValue);
      return newValue;
    });
  };

  const handleDecrement = () => {
    setValue((prevValue) => {
      const newValue = Math.max(prevValue - step, min);
      if (onChange) onChange(newValue);
      return newValue;
    });
  };

  return (
    <div className="stepper" style={{ marginLeft: inputLeft }}>
      <button
        className="stepper-button"
        onClick={handleDecrement}
        disabled={value <= min}
      >
        -
      </button>
      <input
        type="number"
        value={value}
        className="stepper-value"
        readOnly
        style={{
          width: inputWidth,
          height: inputHeight,
        }}
      />
      <button
        className="stepper-button"
        onClick={handleIncrement}
        disabled={value >= max}
      >
        +
      </button>
    </div>
  );
};

Stepper.propTypes = {
  initialValue: PropTypes.number,
  min: PropTypes.number,
  max: PropTypes.number,
  step: PropTypes.number,
  onChange: PropTypes.func,
  inputWidth: PropTypes.string,
  inputHeight: PropTypes.string,
  inputLeft: PropTypes.string,
};

export default Stepper;
